<template>
	<div class="lm-chatgpt-item">
		<chatgpt-item-header text="正在为您生成结果：产品比对-要素填写"></chatgpt-item-header>
		<div class="chatgpt-item-content">
			<div class="item-section-title">产品比对-要素填写</div>
			<div class="add-wrap">
				请输入比对要素
				<h-button type="ghost" @click="addItem">
					<svg-icon iconClass="add" class="add"></svg-icon>新增要素
				</h-button>
			</div>
			<div class="entry-list">
				<div class="entry-item" v-for="(item, index) in featureList" :key="index">
					<label>要素{{index + 1}}</label>
					<h-input v-model="item.text" placeholder="请输入" style="width: 340px" :disabled="item.disabled"></h-input>
					<svg-icon v-if="index !== 0" iconClass="delete2" class="delete" @svgEvent="deleteItem(index)"></svg-icon>
				</div>
			</div>
			<div class="bottom-ope">
				<h-button type="info" @click="confirm">确定</h-button>
			</div>
		</div>
	</div>
</template>

<script>
import ChatgptItemHeader from './chatgpt-item-header'
import { mapState, mapMutations } from "vuex"
export default {
	name: 'ProductComparisonConfig',
	props: {
		item: Object
	},
	components: {
		ChatgptItemHeader,
	},
	data() {
		return {
			docNameList: [],
			featureList: []
		}
	},
	computed: {
		...mapState('lm-chat', ['currentSessionInfo', 'currentClientInfo']),
	},
	watch: {
		item: {
			handler(val) {
				this.featureList = this.item.message.featureList.map(u => {
					let item = {
						text: u
					}
					return item
				})
				this.docNameList = this.item.message.docNameList
			},
			immediate: true
		}
	},
	methods: {
		// 新增
		addItem() {
			this.featureList.push({
				text: ''
			})
		},
		// 删除
		deleteItem(index) {
			this.featureList.splice(index, 1)
		},
		// 确定
		confirm() {
			let featureList = this.featureList.map(u => u.text).filter(u => !!u)
			if(!featureList.length) return this.$public.message(this, 'error', '请至少填写一条要素')
			this.$usePost(this.$url.getComparisonResult, {
				adviser_id: LOCAL_CONFIG.agent_code,
				adviser_name: LOCAL_CONFIG.agent_name,
				client_id: this.currentClientInfo.customer_id,
				client_name: this.currentClientInfo.real_name,
				session_uuid: this.currentSessionInfo.session_id,
				message_content: {
					docNameList: this.docNameList,
					featureList: featureList
				}
			}).then(res => {
				this.$public.message(this, 'success', '提交成功')
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.item-section-title{
	margin-bottom: 16px;
}
.add-wrap{
	font-size: 14px;
	color: #333333;
	margin-bottom: 10px;
	/deep/ .h-btn{
		border-radius: 4px;
		border-color: #D1D4FF;
		color: #4686F2;
		padding: 6px 13px;
		margin-left: 30px;
		.add{
			margin-right: 6px;
			position: relative;
			top: 1px;
		}
	}
}
.entry-list{
	margin-top: 20px;
	.entry-item{
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		label{
			margin-right: 10px;
		}
		.delete{
			margin-left: 6px;
		}
	}
}
.bottom-ope{
	text-align: right;
}
</style>